<template>
    <div class="search-view">
        <a-form
            ref="formRef"
            name="advanced_search"
            class="ant-advanced-search-form"
            :model="formState"
            @finish="onFinish"
        >
            <a-row :gutter="24">
                <template v-for="(item, i) in searchItem" :key="item.name">
                    <a-col v-show="expand || i < 2" :span="8">
                        <a-form-item :name="item.name" :label="item.label">
                            <a-input
                                v-if="item.type === '0'"
                                v-model:value="formState[item.name]"
                                :placeholder="item.placeholder"
                                allow-clear
                            ></a-input>
                            <a-radio-group
                                v-else-if="item.type === '1'"
                                v-model:value="formState[item.name]"
                            >
                                <a-radio-button
                                    v-for="opt in item.options"
                                    :key="opt.value"
                                    :value="opt.value"
                                    >{{ opt.label }}</a-radio-button
                                >
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </template>
            </a-row>
            <a-row style="padding-bottom: 20px">
                <a-col :span="24" style="text-align: right">
                    <a-button @click="reset">重置</a-button>
                    <a-button
                        style="margin: 0 8px"
                        type="primary"
                        :loading="loading"
                        html-type="submit"
                        >查询</a-button
                    >
                    <a
                        v-if="searchItem.length > 2"
                        style="font-size: 12px; color: #1890ff"
                        @click="expand = !expand"
                    >
                        <template v-if="expand">
                            <UpOutlined />
                        </template>
                        <template v-else>
                            <DownOutlined />
                        </template>
                        {{ !expand ? '展开' : '收起' }}
                    </a>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>
<script>
export default {
    name: 'SearchView'
}
</script>
<script setup>
//type为0 input type 为1 单选框组
import { reactive, ref, defineProps, defineEmits, computed } from 'vue'
const props = defineProps({
    searchItem: {
        type: Object
    },
    loading: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['search'])
const expand = ref(false)
const formRef = ref()
const formState = reactive({})
const onFinish = (values) => {
    emit('search', formState)
}
const reset = () => {
    formRef.value.resetFields()
    emit('search', formState)
}
</script>
<style lang="scss" scoped>
.search-view {
    background-color: #fff;
    margin: 20px 0 20px 0;
    padding: 24px;
    padding-bottom: 0;
}
</style>
